| Conditions | 1 |
| Paths | > 20000 |
| Total Lines | 479 |
| Code Lines | 283 |
| Lines | 0 |
| Ratio | 0 % |
| Changes | 1 | ||
| Bugs | 0 | Features | 0 |
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
| 1 | /*! |
||
| 155 | function () { |
||
| 156 | function Carousel(element, config) { |
||
| 157 | this._items = null; |
||
| 158 | this._interval = null; |
||
| 159 | this._activeElement = null; |
||
| 160 | this._isPaused = false; |
||
| 161 | this._isSliding = false; |
||
| 162 | this.touchTimeout = null; |
||
| 163 | this.touchStartX = 0; |
||
| 164 | this.touchDeltaX = 0; |
||
| 165 | this._config = this._getConfig(config); |
||
| 166 | this._element = element; |
||
| 167 | this._indicatorsElement = this._element.querySelector(Selector.INDICATORS); |
||
| 168 | this._touchSupported = 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0; |
||
| 169 | this._pointerEvent = Boolean(window.PointerEvent || window.MSPointerEvent); |
||
| 170 | |||
| 171 | this._addEventListeners(); |
||
| 172 | } // Getters |
||
| 173 | |||
| 174 | |||
| 175 | var _proto = Carousel.prototype; |
||
| 176 | |||
| 177 | // Public |
||
| 178 | _proto.next = function next() { |
||
| 179 | if (!this._isSliding) { |
||
| 180 | this._slide(Direction.NEXT); |
||
| 181 | } |
||
| 182 | }; |
||
| 183 | |||
| 184 | _proto.nextWhenVisible = function nextWhenVisible() { |
||
| 185 | // Don't call next when the page isn't visible |
||
| 186 | // or the carousel or its parent isn't visible |
||
| 187 | if (!document.hidden && $(this._element).is(':visible') && $(this._element).css('visibility') !== 'hidden') { |
||
| 188 | this.next(); |
||
| 189 | } |
||
| 190 | }; |
||
| 191 | |||
| 192 | _proto.prev = function prev() { |
||
| 193 | if (!this._isSliding) { |
||
| 194 | this._slide(Direction.PREV); |
||
| 195 | } |
||
| 196 | }; |
||
| 197 | |||
| 198 | _proto.pause = function pause(event) { |
||
| 199 | if (!event) { |
||
| 200 | this._isPaused = true; |
||
| 201 | } |
||
| 202 | |||
| 203 | if (this._element.querySelector(Selector.NEXT_PREV)) { |
||
| 204 | Util.triggerTransitionEnd(this._element); |
||
| 205 | this.cycle(true); |
||
| 206 | } |
||
| 207 | |||
| 208 | clearInterval(this._interval); |
||
| 209 | this._interval = null; |
||
| 210 | }; |
||
| 211 | |||
| 212 | _proto.cycle = function cycle(event) { |
||
| 213 | if (!event) { |
||
| 214 | this._isPaused = false; |
||
| 215 | } |
||
| 216 | |||
| 217 | if (this._interval) { |
||
| 218 | clearInterval(this._interval); |
||
| 219 | this._interval = null; |
||
| 220 | } |
||
| 221 | |||
| 222 | if (this._config.interval && !this._isPaused) { |
||
| 223 | this._interval = setInterval((document.visibilityState ? this.nextWhenVisible : this.next).bind(this), this._config.interval); |
||
| 224 | } |
||
| 225 | }; |
||
| 226 | |||
| 227 | _proto.to = function to(index) { |
||
| 228 | var _this = this; |
||
| 229 | |||
| 230 | this._activeElement = this._element.querySelector(Selector.ACTIVE_ITEM); |
||
| 231 | |||
| 232 | var activeIndex = this._getItemIndex(this._activeElement); |
||
| 233 | |||
| 234 | if (index > this._items.length - 1 || index < 0) { |
||
| 235 | return; |
||
| 236 | } |
||
| 237 | |||
| 238 | if (this._isSliding) { |
||
| 239 | $(this._element).one(Event.SLID, function () { |
||
| 240 | return _this.to(index); |
||
| 241 | }); |
||
| 242 | return; |
||
| 243 | } |
||
| 244 | |||
| 245 | if (activeIndex === index) { |
||
| 246 | this.pause(); |
||
| 247 | this.cycle(); |
||
| 248 | return; |
||
| 249 | } |
||
| 250 | |||
| 251 | var direction = index > activeIndex ? Direction.NEXT : Direction.PREV; |
||
| 252 | |||
| 253 | this._slide(direction, this._items[index]); |
||
| 254 | }; |
||
| 255 | |||
| 256 | _proto.dispose = function dispose() { |
||
| 257 | $(this._element).off(EVENT_KEY); |
||
| 258 | $.removeData(this._element, DATA_KEY); |
||
| 259 | this._items = null; |
||
| 260 | this._config = null; |
||
| 261 | this._element = null; |
||
| 262 | this._interval = null; |
||
| 263 | this._isPaused = null; |
||
| 264 | this._isSliding = null; |
||
| 265 | this._activeElement = null; |
||
| 266 | this._indicatorsElement = null; |
||
| 267 | } // Private |
||
| 268 | ; |
||
| 269 | |||
| 270 | _proto._getConfig = function _getConfig(config) { |
||
| 271 | config = _objectSpread({}, Default, config); |
||
| 272 | Util.typeCheckConfig(NAME, config, DefaultType); |
||
| 273 | return config; |
||
| 274 | }; |
||
| 275 | |||
| 276 | _proto._handleSwipe = function _handleSwipe() { |
||
| 277 | var absDeltax = Math.abs(this.touchDeltaX); |
||
| 278 | |||
| 279 | if (absDeltax <= SWIPE_THRESHOLD) { |
||
| 280 | return; |
||
| 281 | } |
||
| 282 | |||
| 283 | var direction = absDeltax / this.touchDeltaX; // swipe left |
||
| 284 | |||
| 285 | if (direction > 0) { |
||
| 286 | this.prev(); |
||
| 287 | } // swipe right |
||
| 288 | |||
| 289 | |||
| 290 | if (direction < 0) { |
||
| 291 | this.next(); |
||
| 292 | } |
||
| 293 | }; |
||
| 294 | |||
| 295 | _proto._addEventListeners = function _addEventListeners() { |
||
| 296 | var _this2 = this; |
||
| 297 | |||
| 298 | if (this._config.keyboard) { |
||
| 299 | $(this._element).on(Event.KEYDOWN, function (event) { |
||
| 300 | return _this2._keydown(event); |
||
| 301 | }); |
||
| 302 | } |
||
| 303 | |||
| 304 | if (this._config.pause === 'hover') { |
||
| 305 | $(this._element).on(Event.MOUSEENTER, function (event) { |
||
| 306 | return _this2.pause(event); |
||
| 307 | }).on(Event.MOUSELEAVE, function (event) { |
||
| 308 | return _this2.cycle(event); |
||
| 309 | }); |
||
| 310 | } |
||
| 311 | |||
| 312 | if (this._config.touch) { |
||
| 313 | this._addTouchEventListeners(); |
||
| 314 | } |
||
| 315 | }; |
||
| 316 | |||
| 317 | _proto._addTouchEventListeners = function _addTouchEventListeners() { |
||
| 318 | var _this3 = this; |
||
| 319 | |||
| 320 | if (!this._touchSupported) { |
||
| 321 | return; |
||
| 322 | } |
||
| 323 | |||
| 324 | var start = function start(event) { |
||
| 325 | if (_this3._pointerEvent && PointerType[event.originalEvent.pointerType.toUpperCase()]) { |
||
| 326 | _this3.touchStartX = event.originalEvent.clientX; |
||
| 327 | } else if (!_this3._pointerEvent) { |
||
| 328 | _this3.touchStartX = event.originalEvent.touches[0].clientX; |
||
| 329 | } |
||
| 330 | }; |
||
| 331 | |||
| 332 | var move = function move(event) { |
||
| 333 | // ensure swiping with one touch and not pinching |
||
| 334 | if (event.originalEvent.touches && event.originalEvent.touches.length > 1) { |
||
| 335 | _this3.touchDeltaX = 0; |
||
| 336 | } else { |
||
| 337 | _this3.touchDeltaX = event.originalEvent.touches[0].clientX - _this3.touchStartX; |
||
| 338 | } |
||
| 339 | }; |
||
| 340 | |||
| 341 | var end = function end(event) { |
||
| 342 | if (_this3._pointerEvent && PointerType[event.originalEvent.pointerType.toUpperCase()]) { |
||
| 343 | _this3.touchDeltaX = event.originalEvent.clientX - _this3.touchStartX; |
||
| 344 | } |
||
| 345 | |||
| 346 | _this3._handleSwipe(); |
||
| 347 | |||
| 348 | if (_this3._config.pause === 'hover') { |
||
| 349 | // If it's a touch-enabled device, mouseenter/leave are fired as |
||
| 350 | // part of the mouse compatibility events on first tap - the carousel |
||
| 351 | // would stop cycling until user tapped out of it; |
||
| 352 | // here, we listen for touchend, explicitly pause the carousel |
||
| 353 | // (as if it's the second time we tap on it, mouseenter compat event |
||
| 354 | // is NOT fired) and after a timeout (to allow for mouse compatibility |
||
| 355 | // events to fire) we explicitly restart cycling |
||
| 356 | _this3.pause(); |
||
| 357 | |||
| 358 | if (_this3.touchTimeout) { |
||
| 359 | clearTimeout(_this3.touchTimeout); |
||
| 360 | } |
||
| 361 | |||
| 362 | _this3.touchTimeout = setTimeout(function (event) { |
||
| 363 | return _this3.cycle(event); |
||
| 364 | }, TOUCHEVENT_COMPAT_WAIT + _this3._config.interval); |
||
| 365 | } |
||
| 366 | }; |
||
| 367 | |||
| 368 | $(this._element.querySelectorAll(Selector.ITEM_IMG)).on(Event.DRAG_START, function (e) { |
||
| 369 | return e.preventDefault(); |
||
| 370 | }); |
||
| 371 | |||
| 372 | if (this._pointerEvent) { |
||
| 373 | $(this._element).on(Event.POINTERDOWN, function (event) { |
||
| 374 | return start(event); |
||
| 375 | }); |
||
| 376 | $(this._element).on(Event.POINTERUP, function (event) { |
||
| 377 | return end(event); |
||
| 378 | }); |
||
| 379 | |||
| 380 | this._element.classList.add(ClassName.POINTER_EVENT); |
||
| 381 | } else { |
||
| 382 | $(this._element).on(Event.TOUCHSTART, function (event) { |
||
| 383 | return start(event); |
||
| 384 | }); |
||
| 385 | $(this._element).on(Event.TOUCHMOVE, function (event) { |
||
| 386 | return move(event); |
||
| 387 | }); |
||
| 388 | $(this._element).on(Event.TOUCHEND, function (event) { |
||
| 389 | return end(event); |
||
| 390 | }); |
||
| 391 | } |
||
| 392 | }; |
||
| 393 | |||
| 394 | _proto._keydown = function _keydown(event) { |
||
| 395 | if (/input|textarea/i.test(event.target.tagName)) { |
||
| 396 | return; |
||
| 397 | } |
||
| 398 | |||
| 399 | switch (event.which) { |
||
| 400 | case ARROW_LEFT_KEYCODE: |
||
| 401 | event.preventDefault(); |
||
| 402 | this.prev(); |
||
| 403 | break; |
||
| 404 | |||
| 405 | case ARROW_RIGHT_KEYCODE: |
||
| 406 | event.preventDefault(); |
||
| 407 | this.next(); |
||
| 408 | break; |
||
| 409 | |||
| 410 | default: |
||
| 411 | } |
||
| 412 | }; |
||
| 413 | |||
| 414 | _proto._getItemIndex = function _getItemIndex(element) { |
||
| 415 | this._items = element && element.parentNode ? [].slice.call(element.parentNode.querySelectorAll(Selector.ITEM)) : []; |
||
| 416 | return this._items.indexOf(element); |
||
| 417 | }; |
||
| 418 | |||
| 419 | _proto._getItemByDirection = function _getItemByDirection(direction, activeElement) { |
||
| 420 | var isNextDirection = direction === Direction.NEXT; |
||
| 421 | var isPrevDirection = direction === Direction.PREV; |
||
| 422 | |||
| 423 | var activeIndex = this._getItemIndex(activeElement); |
||
| 424 | |||
| 425 | var lastItemIndex = this._items.length - 1; |
||
| 426 | var isGoingToWrap = isPrevDirection && activeIndex === 0 || isNextDirection && activeIndex === lastItemIndex; |
||
| 427 | |||
| 428 | if (isGoingToWrap && !this._config.wrap) { |
||
| 429 | return activeElement; |
||
| 430 | } |
||
| 431 | |||
| 432 | var delta = direction === Direction.PREV ? -1 : 1; |
||
| 433 | var itemIndex = (activeIndex + delta) % this._items.length; |
||
| 434 | return itemIndex === -1 ? this._items[this._items.length - 1] : this._items[itemIndex]; |
||
| 435 | }; |
||
| 436 | |||
| 437 | _proto._triggerSlideEvent = function _triggerSlideEvent(relatedTarget, eventDirectionName) { |
||
| 438 | var targetIndex = this._getItemIndex(relatedTarget); |
||
| 439 | |||
| 440 | var fromIndex = this._getItemIndex(this._element.querySelector(Selector.ACTIVE_ITEM)); |
||
| 441 | |||
| 442 | var slideEvent = $.Event(Event.SLIDE, { |
||
| 443 | relatedTarget: relatedTarget, |
||
| 444 | direction: eventDirectionName, |
||
| 445 | from: fromIndex, |
||
| 446 | to: targetIndex |
||
| 447 | }); |
||
| 448 | $(this._element).trigger(slideEvent); |
||
| 449 | return slideEvent; |
||
| 450 | }; |
||
| 451 | |||
| 452 | _proto._setActiveIndicatorElement = function _setActiveIndicatorElement(element) { |
||
| 453 | if (this._indicatorsElement) { |
||
| 454 | var indicators = [].slice.call(this._indicatorsElement.querySelectorAll(Selector.ACTIVE)); |
||
| 455 | $(indicators).removeClass(ClassName.ACTIVE); |
||
| 456 | |||
| 457 | var nextIndicator = this._indicatorsElement.children[this._getItemIndex(element)]; |
||
| 458 | |||
| 459 | if (nextIndicator) { |
||
| 460 | $(nextIndicator).addClass(ClassName.ACTIVE); |
||
| 461 | } |
||
| 462 | } |
||
| 463 | }; |
||
| 464 | |||
| 465 | _proto._slide = function _slide(direction, element) { |
||
| 466 | var _this4 = this; |
||
| 467 | |||
| 468 | var activeElement = this._element.querySelector(Selector.ACTIVE_ITEM); |
||
| 469 | |||
| 470 | var activeElementIndex = this._getItemIndex(activeElement); |
||
| 471 | |||
| 472 | var nextElement = element || activeElement && this._getItemByDirection(direction, activeElement); |
||
| 473 | |||
| 474 | var nextElementIndex = this._getItemIndex(nextElement); |
||
| 475 | |||
| 476 | var isCycling = Boolean(this._interval); |
||
| 477 | var directionalClassName; |
||
| 478 | var orderClassName; |
||
| 479 | var eventDirectionName; |
||
| 480 | |||
| 481 | if (direction === Direction.NEXT) { |
||
| 482 | directionalClassName = ClassName.LEFT; |
||
| 483 | orderClassName = ClassName.NEXT; |
||
| 484 | eventDirectionName = Direction.LEFT; |
||
| 485 | } else { |
||
| 486 | directionalClassName = ClassName.RIGHT; |
||
| 487 | orderClassName = ClassName.PREV; |
||
| 488 | eventDirectionName = Direction.RIGHT; |
||
| 489 | } |
||
| 490 | |||
| 491 | if (nextElement && $(nextElement).hasClass(ClassName.ACTIVE)) { |
||
| 492 | this._isSliding = false; |
||
| 493 | return; |
||
| 494 | } |
||
| 495 | |||
| 496 | var slideEvent = this._triggerSlideEvent(nextElement, eventDirectionName); |
||
| 497 | |||
| 498 | if (slideEvent.isDefaultPrevented()) { |
||
| 499 | return; |
||
| 500 | } |
||
| 501 | |||
| 502 | if (!activeElement || !nextElement) { |
||
| 503 | // Some weirdness is happening, so we bail |
||
| 504 | return; |
||
| 505 | } |
||
| 506 | |||
| 507 | this._isSliding = true; |
||
| 508 | |||
| 509 | if (isCycling) { |
||
| 510 | this.pause(); |
||
| 511 | } |
||
| 512 | |||
| 513 | this._setActiveIndicatorElement(nextElement); |
||
| 514 | |||
| 515 | var slidEvent = $.Event(Event.SLID, { |
||
| 516 | relatedTarget: nextElement, |
||
| 517 | direction: eventDirectionName, |
||
| 518 | from: activeElementIndex, |
||
| 519 | to: nextElementIndex |
||
| 520 | }); |
||
| 521 | |||
| 522 | if ($(this._element).hasClass(ClassName.SLIDE)) { |
||
| 523 | $(nextElement).addClass(orderClassName); |
||
| 524 | Util.reflow(nextElement); |
||
| 525 | $(activeElement).addClass(directionalClassName); |
||
| 526 | $(nextElement).addClass(directionalClassName); |
||
| 527 | var nextElementInterval = parseInt(nextElement.getAttribute('data-interval'), 10); |
||
| 528 | |||
| 529 | if (nextElementInterval) { |
||
| 530 | this._config.defaultInterval = this._config.defaultInterval || this._config.interval; |
||
| 531 | this._config.interval = nextElementInterval; |
||
| 532 | } else { |
||
| 533 | this._config.interval = this._config.defaultInterval || this._config.interval; |
||
| 534 | } |
||
| 535 | |||
| 536 | var transitionDuration = Util.getTransitionDurationFromElement(activeElement); |
||
| 537 | $(activeElement).one(Util.TRANSITION_END, function () { |
||
| 538 | $(nextElement).removeClass(directionalClassName + " " + orderClassName).addClass(ClassName.ACTIVE); |
||
| 539 | $(activeElement).removeClass(ClassName.ACTIVE + " " + orderClassName + " " + directionalClassName); |
||
| 540 | _this4._isSliding = false; |
||
| 541 | setTimeout(function () { |
||
| 542 | return $(_this4._element).trigger(slidEvent); |
||
| 543 | }, 0); |
||
| 544 | }).emulateTransitionEnd(transitionDuration); |
||
| 545 | } else { |
||
| 546 | $(activeElement).removeClass(ClassName.ACTIVE); |
||
| 547 | $(nextElement).addClass(ClassName.ACTIVE); |
||
| 548 | this._isSliding = false; |
||
| 549 | $(this._element).trigger(slidEvent); |
||
| 550 | } |
||
| 551 | |||
| 552 | if (isCycling) { |
||
| 553 | this.cycle(); |
||
| 554 | } |
||
| 555 | } // Static |
||
| 556 | ; |
||
| 557 | |||
| 558 | Carousel._jQueryInterface = function _jQueryInterface(config) { |
||
| 559 | return this.each(function () { |
||
| 560 | var data = $(this).data(DATA_KEY); |
||
| 561 | |||
| 562 | var _config = _objectSpread({}, Default, $(this).data()); |
||
| 563 | |||
| 564 | if (typeof config === 'object') { |
||
| 565 | _config = _objectSpread({}, _config, config); |
||
| 566 | } |
||
| 567 | |||
| 568 | var action = typeof config === 'string' ? config : _config.slide; |
||
| 569 | |||
| 570 | if (!data) { |
||
| 571 | data = new Carousel(this, _config); |
||
| 572 | $(this).data(DATA_KEY, data); |
||
| 573 | } |
||
| 574 | |||
| 575 | if (typeof config === 'number') { |
||
| 576 | data.to(config); |
||
| 577 | } else if (typeof action === 'string') { |
||
| 578 | if (typeof data[action] === 'undefined') { |
||
| 579 | throw new TypeError("No method named \"" + action + "\""); |
||
| 580 | } |
||
| 581 | |||
| 582 | data[action](); |
||
| 583 | } else if (_config.interval && _config.ride) { |
||
| 584 | data.pause(); |
||
| 585 | data.cycle(); |
||
| 586 | } |
||
| 587 | }); |
||
| 588 | }; |
||
| 589 | |||
| 590 | Carousel._dataApiClickHandler = function _dataApiClickHandler(event) { |
||
| 591 | var selector = Util.getSelectorFromElement(this); |
||
| 592 | |||
| 593 | if (!selector) { |
||
| 594 | return; |
||
| 595 | } |
||
| 596 | |||
| 597 | var target = $(selector)[0]; |
||
| 598 | |||
| 599 | if (!target || !$(target).hasClass(ClassName.CAROUSEL)) { |
||
| 600 | return; |
||
| 601 | } |
||
| 602 | |||
| 603 | var config = _objectSpread({}, $(target).data(), $(this).data()); |
||
| 604 | |||
| 605 | var slideIndex = this.getAttribute('data-slide-to'); |
||
| 606 | |||
| 607 | if (slideIndex) { |
||
| 608 | config.interval = false; |
||
| 609 | } |
||
| 610 | |||
| 611 | Carousel._jQueryInterface.call($(target), config); |
||
| 612 | |||
| 613 | if (slideIndex) { |
||
| 614 | $(target).data(DATA_KEY).to(slideIndex); |
||
| 615 | } |
||
| 616 | |||
| 617 | event.preventDefault(); |
||
| 618 | }; |
||
| 619 | |||
| 620 | _createClass(Carousel, null, [{ |
||
| 621 | key: "VERSION", |
||
| 622 | get: function get() { |
||
| 623 | return VERSION; |
||
| 624 | } |
||
| 625 | }, { |
||
| 626 | key: "Default", |
||
| 627 | get: function get() { |
||
| 628 | return Default; |
||
| 629 | } |
||
| 630 | }]); |
||
| 631 | |||
| 632 | return Carousel; |
||
| 633 | }(); |
||
| 634 | /** |
||
| 669 |
This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.
To learn more about declaring variables in Javascript, see the MDN.